<template>
	<view class="user-footprint">
		<scroll-view
			class="footprint-container"
			scroll-x
			:show-scrollbar="false"
			:enable-flex="true"
		>
			<view class="footprint-list">
				<view
					class="footprint-item"
					v-for="item in items"
					:key="item.id"
					@tap="onItemTap(item)"
				>
					<image
						:src="'https://shop.sdamdyy.cn/' + (item.mainPic || '/static/empty/no.jpg')"
						class="goods-image"
						mode="aspectFill"
					/>
					<view class="item-info">
						<text class="goods-name">{{ item.title }}</text>
						<view class="view-time">浏览次数：{{ item.visitCount }} 次</view>
						<text class="view-time">{{ formatTime(item.viewTime) }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { useCool } from "/@/cool";

defineProps<{
	items: any[];
}>();

const { router } = useCool();

function onItemTap(item: any) {
	console.log('首页足迹点击，商品数据:', item);
	console.log('跳转的商品ID:', item.id);
	router.push(`/pages/goods/detail?id=${item.id}`);
}

function formatTime(time: string) {
	const now = new Date();
	const viewTime = new Date(time);
	const diff = now.getTime() - viewTime.getTime();
	const minutes = Math.floor(diff / (1000 * 60));
	const hours = Math.floor(minutes / 60);
	const days = Math.floor(hours / 24);

	if (days > 0) {
		return `${days}天前`;
	} else if (hours > 0) {
		return `${hours}小时前`;
	} else if (minutes > 0) {
		return `${minutes}分钟前`;
	} else {
		return "刚刚";
	}
}
</script>

<style lang="scss" scoped>
.user-footprint {
	padding: 0 16rpx;
}

.footprint-container {
	width: 100%;
	white-space: nowrap;
}

.footprint-list {
	display: flex;
	gap: 16rpx;
	padding: 8rpx 0;
}

.footprint-item {
	flex-shrink: 0;
	width: 200rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
	}
}

.goods-image {
	width: 100%;
	height: 160rpx;
	background-color: #f5f5f5;
}

.item-info {
	padding: 16rpx;
}

.goods-name {
	font-size: 24rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.view-time {
	font-size: 20rpx;
	color: #999;
}
</style>
